<template>
	<view class="">
		<u-tabs-swiper ref="uTabs" :list="list" :is-scroll="false" :current="current" :bar-width="130" active-color="#002B56" @change="change" swiperWidth="750">
		</u-tabs-swiper>

		<!-- 车辆报告查询 -->
		<view class="quickValuation" v-if="current===0">
			<view v-if="clInfo.length>0" @click="zhInfoDetail">
				<view class="box">
					<u-swipe-action :index="index" v-for="(item,index) in clInfo" :key="item.id" @click="clickCl"
						:options="options">
						<view class="content" @click="clInfoDetail(clInfo[index].orderNo)">
							<view class="title">
								<text class="left">{{item.jsonData.carInfo.series_name}}</text>
								<text class="right">{{item.jsonData.carInfo.report_time}}</text>
							</view>
							<view class="carInfo" style="font-size: 32rpx;color: #9d9d9d;">
								<!-- <text class="infoLeft">{{item.jsonData.carInfo.version_year}}款
									{{item.jsonData.carInfo.model_name}}</text> -->
								{{item.jsonData.carInfo.version_year}}款
								{{item.jsonData.carInfo.model_name}}
							</view>
						</view>
					</u-swipe-action>
				</view>
				<view class="prompt_language">
					<text>以上是您的{{clInfo.length}}条记录</text>
				</view>
			</view>
			<view v-else>
				<null></null>
			</view>
			<u-loadmore :status="status" :load-text="loadText" id="loadmore" />
		</view>

		<!-- 召回记录查询 -->
		<view class="quickValuation" v-if="current===1">
			<view v-if="zhInfo.length>0">
				<view class="box">
					<u-swipe-action :show="item.show" :index="index" v-for="(item,index) in zhInfo"
						:key="item.zhqueryId" @click="clickZh" @open="open" :options="options">
						<view class="item u-border-bottom">
							<view class="title-wrap">
								<view class="content" @click="zhInfoDetail(zhInfo[index].paramVin)">
									<view class="title">
										<text class="left">{{item.modelName}}</text>
										<text class="right">{{item.createTime}}</text>
									</view>
									<view class="carInfo">
										<text class="infoLeft">{{item.paramVin}}</text>
									</view>
								</view>
							</view>
						</view>
					</u-swipe-action>

				</view>
				<view class="prompt_language">
					<text>以上是您的{{zhInfo.length}}条记录</text>
				</view>
			</view>
			<view v-else>
				<null></null>
			</view>
			<u-loadmore :status="status" :load-text="loadText" id="loadmore" v-if="zhInfo.length>0" />
		</view>

		<!-- 投诉记录查询 -->
		<view class="quickValuation" v-if="current===2">
			<view v-if="tsInfo.length>0">
				<view class="box">
					<u-swipe-action :index="index" v-for="(item,index) in tsInfo" :key="item.id" @click="clickTs"
						:options="options">
						<view class="content" @click="tsInfoDetail(tsInfo[index].paramCx,tsInfo[index].paramCxing)">
							<view class="title">
								<text class="left">{{item.paramCx}}</text>
								<text class="right">{{item.createTime}}</text>
							</view>
							<view class="carInfo">
								<text class="infoLeft">{{item.paramCxing}}</text>
							</view>
						</view>
					</u-swipe-action>
					<u-swipe-action :show="show" :index="index" :btn-width="btnWidth" v-for="(item,index) in tsInfo"
						:key="index" @click="remove(item)" :options="options">
					</u-swipe-action>
				</view>
				<view class="prompt_language">
					<text>以上是您的{{tsInfo.length}}条记录</text>
				</view>
			</view>
			<view v-else>
				<null></null>
			</view>

		</view>

		<!-- 维保记录查询 -->
		<view class="quickValuation" v-if="current===3">
			<view v-if="wbInfo.length>0">
				<view class="box">
					<u-swipe-action :index="index" v-for="(item,index) in wbInfo" :key="item.reportId" @click="clickWb"
						:options="options">
						<view class="content" @click="wbInfoDetail(wbInfo[index].orderNo)">
							<view class="title">
								<text class="left">{{item.modelName}}</text>
								<text class="right">{{item.jsonData.carInfo.report_time}}</text>
							</view>
							<view class="carInfo">
								<text class="infoLeft">{{item.vin}}</text>
							</view>
						</view>
					</u-swipe-action>
					<u-swipe-action :show="show" :index="index" :btn-width="btnWidth"
						v-for="(item,index) in messageInfo" :key="index" @click="remove(item)" :options="options">
					</u-swipe-action>
				</view>
				<view class="prompt_language">
					<text>以上是您的{{wbInfo.length}}条记录</text>
				</view>
			</view>
			<view v-else>
				<null></null>
			</view>

		</view>
	</view>
</template>

<script>
	import API from '@/api/query.js'
	import GET from "@/api/report.js"
	export default {
		data() {
			return {
				zhcount: 0,
				disabled: false,
				btnWidth: 180,
				show: false,
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}],
				clInfo: [],
				zhInfo: [],
				tsInfo: [],
				wbInfo: [],
				list: [{
					name: '车辆查询'
				}, {
					name: '召回记录'
				}, {
					name: '投诉记录'
				}, {
					name: '维保记录'
				}],
				parms: {
					page: 1,
					limit: 10
				},
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
				status: 'loadmore',
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
			};
		},

		onShow() {
			this.getClInfo();
			this.getZhInfo();
			this.getTsInfo();
			this.getWbInfo();
		},
		methods: {
			// tabs通知swiper切换
			change(index) {
				this.current = index;
			},
			onReachBottom() {
				uni.showLoading({
					title: this.status,
				});
				this.status = 'loading';
				this.parms.page = this.parms.page + 1;



				API.getZhInfo(this.parms).then(res => {
					console.log(res)
					this.zhInfo = this.zhInfo.concat(res.data)
					console.log(this.zhInfo);
					this.zhcount = res.count;
				})
				if (this.parms.page * this.parms.limit >= this.zhcount) {
					this.status = 'nomore';
				} else {
					this.status = 'loadmore';
				}

			},
			//车辆报告查询记录
			getClInfo() {
				let token = uni.getStorage({
					token: token
				})
				API.getClInfo(this.parms).then(res => {
					this.clInfo = res.data
					this.zhcount = res.count
					if (this.parms.page * this.parms.limit >= this.zhcount) {
						this.status = 'nomore';
					} else {
						this.status = 'loadmore';
					}
				})

			},
			//车辆记录详情
			clInfoDetail(e) {
				let orderNo = e;
				// console.log(e)
				uni.navigateTo({
					url: "/pagesB/carReport/carReportDetail?orderNo=" + orderNo
				})
			},
			wbInfoDetail(e) {
				let orderNo = e;
				uni.navigateTo({
					url: "/pagesB/queryRecord/wbInfoDetail?orderNo=" + orderNo
				})
			},
			//召回记录查询
			getZhInfo() {
				let token = uni.getStorage({
					token: token
				})
				API.getZhInfo(this.parms).then(res => {
					this.zhInfo = res.data
					this.zhInfo.forEach(v => {
						v.show = false
					})
					// console.log(this.zhInfo)
				})
			},
			//投诉记录查询
			getTsInfo() {
				let token = uni.getStorage({
					token: token
				})
				API.getTsInfo({
					token
				}).then(res => {
					this.tsInfo = res.data
					// console.log(res)
				})
			},
			//维保记录查询
			getWbInfo() {
				let token = uni.getStorage({
					token: token
				})
				API.getWbInfo({
					token: token,
				}).then(res => {
					this.wbInfo = res.data
					// console.log(this.wbInfo)
				})

			},
			//投诉详情
			tsInfoDetail(cx, cxing) {
				console.log(cx, cxing)
				uni.navigateTo({
					url: '/pagesB/queryRecord/tsInfoDetail?cx=' + cx + '&&cxing=' + cxing
				})
			},
			//召回记录详情
			zhInfoDetail(e) {
				// console.log(e)
				uni.navigateTo({
					url: '/pagesB/queryRecord/zhInfoDetail?vin=' + e,
				})
				// 
			},
			clickCl(index, index1) {
				// console.log(index)
				if (index1 == 0) {
					let reportId = this.clInfo[index].reportId;
					API.delclbg({
						reportId: reportId
					}).then(res => {
						// console.log(res)
						if (res.code == 200) {
							this.getClInfo();
							this.$u.toast(`删除成功`);
						} else {
							this.$u.toast(`删除失败`);
						}
					})
				}
			},
			clickZh(index, index1) {
				console.log(index)
				if (index1 == 0) {
					// this.zhInfo.splice(index, 1);
					let zhqueryId = this.zhInfo[index].zhqueryId;
					API.delzh({
						zhqueryId: zhqueryId
					}).then(res => {
						// console.log(res)
						if (res.code == 200) {
							this.getZhInfo();
							this.$u.toast(`删除成功`);
						} else {
							this.$u.toast(`删除失败`);
						}
					})
				}
			},
			// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
			open(index) {
				// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
				// 原本为'false'，再次设置为'false'会无效
				this.zhInfo[index].show = true;
				this.zhInfo.map((val, idx) => {
					console.log(index, idx)
					if (index != idx) {
						this.zhInfo[idx].show = false;
					}
				})
			},
			clickWb(index, index1) {
				console.log(index)
				if (index1 == 0) {
					// this.zhInfo.splice(index, 1);
					let mrReportId = this.wbInfo[index].mrReportId;
					API.delwbjl({
						mrReportId: mrReportId
					}).then(res => {
						// console.log(res)
						if (res.code == 200) {
							this.getWbInfo();
							this.$u.toast(`删除成功`);
						} else {
							this.$u.toast(`删除失败`);
						}
					})
				}
			},

			clickTs(index, index1) {
				console.log(index)
				if (index1 == 0) {
					let tsId = this.tsInfo[index].id;
					API.delts({
						tsId: tsId
					}).then(res => {
						if (res.success) {
							this.getTsInfo();
							this.$u.toast(`删除成功`);
						} else {
							this.$u.toast(`删除失败`);
						}
					})
				}
			}
		}
	};
</script>

<style scoped>
	.box {
		width: 100%;
		height: 100%;
		padding: 0 24rpx;
		box-sizing: border-box;
		background: #fff;
	}

	.content {
		width: 100%;
		height: auto;
		padding: 24rpx;
		border-bottom: 1rpx solid #eee;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}

	.title {
		margin-bottom: 10rpx;
		display: flex;
		justify-content: space-between;
	}

	.titleImg {
		width: 80rpx;
		height: 80rpx;
	}

	.left {
		font-size: 36rpx;
		font-weight: bold;
	}

	.right {
		line-height: 48rpx;
		font-size: 26rpx;
		color: #9D9D9D;
	}

	.carInfo {
		display: flex;
		justify-content: space-between;
	}

	.carInfo .infoLeft {
		font-size: 32rpx;
		color: #9d9d9d;
	}

	.carInfo .infoRight {
		color: #ee8a3f;
	}

	.bottom {
		display: flex;
		justify-content: space-between;
	}

	.prompt_language {
		background-color: #FFFFFF;
		padding: 24rpx;
		color: #9D9D9D;
		text-align: center;
		font-weight: 500;
	}
</style>
